<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                template="/template/OutletManagementTemplate.xhtml">

    <ui:define name="contentInsert">

        <h:form id="formUpload">
            <h:panelGrid columns="3" >
                <h:outputText value="Add new food item:" style="font-weight: bold"/>
                <h:outputText />
                <h:outputText />
                
                <h:outputLabel value="Item name: "/>
                <p:inputText id="name" value="#{foodItemManagedBean.name}"  
                             required="true" style="width: 250px"/>
                <p:message for="name"/>

                <h:outputLabel value="Price: "/>
                <p:inputText id="price" value="#{foodItemManagedBean.cost}"  
                             required="true" style="width: 250px"/>
                <p:message for="name"/>

                <h:outputLabel value="Item type: "/>
                <h:selectOneMenu id="type" value="#{foodItemManagedBean.itemType}"  >
                    <f:selectItems value="#{foodItemManagedBean.availableFoodTypes}"/>
                </h:selectOneMenu>
                <p:message for="type"/>

                <h:outputText value="Upload Dish Photo: "/>
                <h:panelGrid columns="2">
                    <h:form enctype="multipart/form-data" prependId="false">
                        <p:growl id="growl2" showDetail="true" life="2000"></p:growl> 
                        <p:fileUpload fileUploadListener="#{photoManagedBean.handleDishPhotoUpload}" multiple="false" label="Select Files" allowTypes="*.jpg;*.png;*.gif;" description="Images" auto="true" update="formUpload:pic"/>	
                    </h:form> 
                    <p:graphicImage id="pic" value="#{photoManagedBean.photoFilePath}" height="80" width="80" />
                </h:panelGrid>
                <h:outputText />

                <h:outputLabel value="Item description: " style=""/>
                <p:inputTextarea id="description" value="#{foodItemManagedBean.description}"  
                                 required="true" style="width: 400px; height:100px"/>
                <p:message for="name"/>

                <p:commandButton id="submitNewFoodItem" value="Submit" 
                                 update="msg, itemListForm:itemList, name, price, type, description"
                                 actionListener="#{foodItemManagedBean.addNewFoodItem}" />
                <p:ajaxStatus style="width:20px;height:20px;">
                    <f:facet name="start">
                        <h:graphicImage value="http://www.primefaces.org:8080/showcase/design/ajaxloading.gif" />
                    </f:facet>
                    <f:facet name="complete">
                        <h:outputText value="" />
                    </f:facet>
                </p:ajaxStatus>
            </h:panelGrid>
            <p:messages id="msg"/>
        </h:form>
        <!--                <h:panelGrid style="width: 100%; border-bottom-style: groove"/>-->
        <br/>
        <h:form id="itemListForm">
            <p:dataTable id="itemList" var="item" value="#{foodItemManagedBean.getFoodItem()}" 
                         emptyMessage="Currently no food items have been added"
                         dynamic ="true" paginatorPosition="top"
                         paginator="true" rows="6"
                         rowEditListener="#{foodItemManagedBean.onRowEdit}">
                <f:facet name="header">
                    Existing food items
                </f:facet>
                <p:column style="width:16px">  
                    <p:rowToggler />  
                </p:column> 
                <p:column headerText="ID">
                    <h:outputText id="itemID" value="#{item.id}" />
                </p:column>
                <p:column headerText="Name">
                    <p:cellEditor>  
                        <f:facet name="output">  
                            <h:outputText id="itemName" value="#{item.name}" />
                        </f:facet>
                        <f:facet name="input">
                            <p:inputText style="width:90%" value="#{item.name}"/>
                        </f:facet>
                    </p:cellEditor>
                </p:column>
                <p:column headerText="Type" filterBy="#{item.type}">
                    <p:cellEditor>  
                        <f:facet name="output">  
                            <h:outputText id="itemType" value="#{item.type}" />
                        </f:facet>
                        <f:facet name="input">
                            <h:selectOneMenu value="#{item.type}" >
                                <f:selectItems value="#{foodItemManagedBean.availableFoodTypes}"/>
                            </h:selectOneMenu>
                        </f:facet>
                    </p:cellEditor>


                </p:column>
                <p:column headerText="Image">
                    <p:cellEditor>  
                        <f:facet name="output">  
                            <p:graphicImage value =" #{item.pathName}" width="100" height="100"/>
                        </f:facet>
                        <f:facet name="input">
                            <p:graphicImage value =" #{item.pathName}" width="100" height="100"/>
                        </f:facet>
                    </p:cellEditor>
                </p:column>
                <p:column headerText="Price">
                    <p:cellEditor>  
                        <f:facet name="output">  
                            <h:outputText id="itemPrice" value="#{item.price}" />
                        </f:facet>
                        <f:facet name="input">
                            <p:inputText style="width:90%" value="#{item.price}"/>
                        </f:facet>
                    </p:cellEditor>
                </p:column>
                <p:column headerText="Edit" style="width:5px">
                    <p:rowEditor />
                </p:column>
                <p:column headerText="Delete" style="width:8px">
                    <p:commandButton id="removeItem" image="ui-icon ui-icon-trash" ajax="false"
                                     update="display" actionListener="#{foodItemManagedBean.deleteFoodItem}">
                        <f:attribute name="itemId" value="#{item.id}" /> 
                    </p:commandButton>
                </p:column>
                <p:rowExpansion>  
                    <p:panel>
                        <h:outputText value="#{item.description}" style="width: 400px"/>
                    </p:panel>

                    <br/>
                </p:rowExpansion>
            </p:dataTable>
        </h:form>
    </ui:define>
</ui:composition>
